<template>
  <div>
    <van-nav-bar title="影院"  ref="navbar" @click-left='handleLeft' @click-right='handleright'>
      <template #left>
      {{$store.state.cityName}}<van-icon name="arrow-down" color='black' />
      </template>
      <template #right >
        <van-icon name="search" size="25" />
      </template>
    </van-nav-bar>
    <div
      class="box"
      :style="{
        height: height,
      }"
    >
      <ul>
        <li v-for="data in $store.state.cinemaList" :key="data.cinemaId">
          <div class="right">
            <div class="cinemaName">{{ data.name }}</div>
            <div class="cinemaAddress">{{ data.address }}</div>
          </div>
          <div class="price">￥{{ data.lowPrice / 100 }}起</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// import http from '@/until/http.js'
// import BetterScrollCore from '@better-scroll/core'
import BetterScroll from 'better-scroll'
export default {
  data () {
    return {
      cinemaList: [],
      height: '0px'
    }
  },
  mounted () {
    this.height =
      document.documentElement.clientHeight -
      this.$refs.navbar.$el.offsetHeight -
      document.querySelector('footer').offsetHeight +
      'px'
    //
    if (this.$store.state.cinemaList.length === 0) {
      this.$store.dispatch('changCinemas', this.$store.state.cityId).then(res => {
        this.$nextTick(() => {
          new BetterScroll('.box', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
  },
  methods: {
    handleLeft () {
      this.$router.push('./City')
      this.$store.commit('changList')
    },
    handleright () {
      this.$router.push('./Search')
      console.log('sd')
    }
  }
}
</script>
<style lang="scss" scoped>
li {
  display: flex;
  justify-content: space-between;
  padding: 0.9375rem;
}
.cinemaName {
  margin-top: 0.3125rem;
  font-size: 15px;
}
.cinemaAddress {
  font-size: 12px;
  color: #797d82;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.3125rem;
}
.price {
  font-size: 15px;
  color: #ff5f16;
}
.right {
  width: 13.25rem;
  padding-right: 0.9375rem;
  margin-right: 1;
}
.box {
  overflow: hidden;
  position: relative;
  // height: 18.75rem;
}
</style>
